JavaScript-malliteraler: Taggede maler kontra strengbehandling

JavaScript-malliteraler, introdusert med ECMAScript 2015 (ES6), revolusjonerte strenghåndtering i JavaScript. De tilbyr et renere og mer lesbart alternativ til tradisjonell strengsammenslåing og gir kraftige funksjoner som flerlinjestekster og strenginterpolering. Men utover det grunnleggende, låser taggede maler opp et helt nytt nivå av strengbehandlingsmuligheter. Denne guiden utforsker nyansene i malliteraler, dykker dypt ned i taggede maler og sammenligner dem med standard teknikker for strengbehandling.

Hva er malliteraler?

Malliteraler er strengliteraler som tillater innebygde uttrykk. De er omsluttet av gravistegnet (`) i stedet for doble eller enkle anførselstegn. Denne enkle endringen åpner opp for en mengde muligheter.

Grunnleggende syntaks og interpolering

Den grunnleggende funksjonen til malliteraler er strenginterpolering. Du kan bygge inn JavaScript-uttrykk direkte i strengen ved hjelp av ${uttrykk}-syntaksen. Uttrykket blir evaluert, og resultatet konverteres til en streng og settes inn i malliteralen.

            
const navn = 'Alice';
const alder = 30;
const hilsen = `Hei, mitt navn er ${navn} og jeg er ${alder} år gammel.`;
console.log(hilsen); // Utskrift: Hei, mitt navn er Alice og jeg er 30 år gammel.

            

              
                Copy
              
            
          

Dette er betydelig renere og mer lesbart enn tilsvarende strengsammenslåing:

            
const navn = 'Alice';
const alder = 30;
const hilsen = 'Hei, mitt navn er ' + navn + ' og jeg er ' + alder + ' år gammel.';
console.log(hilsen);

            

              
                Copy
              
            
          

Flerlinjestekster

Malliteraler forenkler også opprettelsen av flerlinjestekster. Du kan enkelt inkludere linjeskift direkte innenfor gravistegnene, uten behov for tungvinte \n-tegn.

            
const flerlinjeStreng = `Dette er en
flerlinje-
streng.`;
console.log(flerlinjeStreng);
/* Utskrift:
Dette er en
flerlinje-
streng.
*/

            

              
                Copy
              
            
          

I motsetning kan det å lage flerlinjestekster med tradisjonell strengsammenslåing være feilutsatt og vanskelig å lese.

Taggede maler: Slipp løs kraften

Taggede maler er den virkelige game-changeren. De lar deg behandle malliteraler med en funksjon. Taggen er rett og slett en funksjon som kalles med malliteralens deler og interpolerte verdier.

Syntaks og funksjonsstruktur

Syntaksen for taggede maler er enkel. Du plasserer navnet på tag-funksjonen foran malliteralen:

            
const navn = 'Bob';
const alder = 25;
const resultat = minTag`Mitt navn er ${navn} og jeg er ${alder} år gammel.`;
console.log(resultat);

            

              
                Copy
              
            
          

Funksjonen minTag mottar følgende argumenter:

• strings: En array med strengliteraler fra malen.
• ...values: Verdiene til de interpolerte uttrykkene.

Arrayen strings inneholder strengdelene *før*, *mellom* og *etter* de interpolerte verdiene. Argumentet values er en rest-parameter (...values) som samler alle de interpolerte verdiene i en array.

            
function minTag(strings, ...values) {
  console.log('strings:', strings);
  console.log('values:', values);
  return 'Behandlet streng';
}

const navn = 'Bob';
const alder = 25;
const resultat = minTag`Mitt navn er ${navn} og jeg er ${alder} år gammel.`;
/* Utskrift:
strings: ["Mitt navn er ", " og jeg er ", " år gammel.", raw: Array(3)]
values: ["Bob", 25]
*/

            

              
                Copy
              
            
          

Merk at arrayen strings også har en raw-egenskap, som inneholder de rå, uescapede strengliteralene. Dette er nyttig når man håndterer escape-sekvenser.

Lage egne tags: Praktiske eksempler

Den virkelige kraften i taggede maler ligger i muligheten til å definere egne tags for spesifikke strengbehandlingsoppgaver. Her er noen praktiske eksempler:

1. HTML-escaping

Å forhindre cross-site scripting (XSS)-angrep er avgjørende for nettsikkerhet. En tagget mal kan automatisk escape HTML-entiteter i interpolerte verdier.

            
function escapeHTML(strings, ...values) {
  const escapedValues = values.map(value => {
    return String(value)
      .replace(/&/g, '&')
      .replace(//g, '>')
      .replace(/"/g, '"')
      .replace(/'/g, ''');
  });
  let result = strings[0];
  for (let i = 0; i < escapedValues.length; i++) {
    result += escapedValues[i] + strings[i + 1];
  }
  return result;
}

const brukerinput = '';
const sikkerHTML = escapeHTML`
Brukerinput: ${brukerinput}
`;
console.log(sikkerHTML);
// Utskrift: 
Brukerinput: <script>alert("XSS");</script>

            

              
                Copy
              
            
          

2. Lokalisering (i18n)

Taggede maler kan brukes til å forenkle internasjonalisering (i18n) ved å tilby en praktisk måte å slå opp oversettelser basert på en språkkode.

            
// Forenklet eksempel (krever en oversettelsesordbok)
const oversettelser = {
  no: {
    greeting: 'Hei, {name}!',
    agePrompt: 'Du er {age} år gammel.'
  },
  fr: {
    greeting: 'Bonjour, {name} !',
    agePrompt: 'Vous avez {age} ans.'
  },
  es: {
    greeting: '¡Hola, {name}!',
    agePrompt: 'Tienes {age} años.'
  }
};

let gjeldendeSpraak = 'no';

function i18n(strings, ...values) {
  const key = strings.join('{}'); // Enkel nøkkelgenerering, kan forbedres
  const translation = oversettelser[gjeldendeSpraak][key];

  if (!translation) {
    console.warn(`Oversettelse ikke funnet for nøkkel: ${key}`);
    return strings.reduce((acc, part, i) => acc + part + (values[i] || ''), ''); // Returner original streng
  }

  // Erstatt plassholdere med verdier
  let result = translation;
  values.forEach((value, index) => {
    result = result.replace(`{${index}}`, value);
  });

  return result;
}

const navn = 'Carlos';
const alder = 35;

console.log(i18n`Hello, {name}! You are {age} years old.`); // Utskrift (Norsk): Hei, Carlos! Du er 35 år gammel.

gjeldendeSpraak = 'fr';
console.log(i18n`Hello, {name}! You are {age} years old.`); // Utskrift (Fransk): Oversettelse ikke funnet, returnerer originalen: Hello, Carlos! You are 35 years old. (fordi en mer kompleks nøkkel er nødvendig.)

            

              
                Copy
              
            
          

Merk: Dette er et forenklet eksempel. I et reelt scenario ville du brukt et mer robust oversettelsesbibliotek og en bedre strategi for nøkkelgenerering.

3. Styling og formatering

Taggede maler kan brukes til å anvende tilpasset styling eller formatering på strenger. For eksempel kan du lage en tag som automatisk legger til fet formatering på bestemte ord.

            
function fetSkrift(strings, ...values) {
  let result = strings[0];
  for (let i = 0; i < values.length; i++) {
    result += `${values[i]}` + strings[i + 1];
  }
  return result;
}

const vare = 'produkt';
const pris = 99.99;
const formatertStreng = fetSkrift`Varen ${vare} koster ${pris}.`;
console.log(formatertStreng); // Utskrift: Varen produkt koster 99.99.

            

              
                Copy
              
            
          

4. Validering av input

Taggede maler kan også brukes til å validere inndata. Dette er spesielt nyttig for å sikre at brukerleverte verdier overholder spesifikke regler.

            
function validerEpost(strings, ...values) {
  const epost = values[0]; // Forutsetter kun én verdi: e-postadressen
  const epostRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!epostRegex.test(epost)) {
    return 'Ugyldig e-postadresse.';
  }
  return `Gyldig e-post: ${epost}`;
}

const epost1 = 'test@example.com';
const epost2 = 'ugyldig-epost';

console.log(validerEpost`E-postadresse: ${epost1}`); // Utskrift: Gyldig e-post: test@example.com
console.log(validerEpost`E-postadresse: ${epost2}`); // Utskrift: Ugyldig e-postadresse.

            

              
                Copy
              
            
          

Sikkerhetshensyn med taggede maler

Selv om taggede maler gir mange fordeler, er det avgjørende å være klar over potensielle sikkerhetsimplikasjoner, spesielt når man håndterer brukerinput. Saniter eller escape alltid brukerleverte verdier for å forhindre XSS-sårbarheter. Hvis du bruker en tag fra et tredjepartsbibliotek, sørg for at det er godt gjennomgått og pålitelig.

Teknikker for strengbehandling: En sammenligning

Taggede maler tilbyr en kraftig og fleksibel måte å behandle strenger på, men de er ikke alltid den beste løsningen for ethvert scenario. Her er en sammenligning med andre vanlige teknikker for strengbehandling.

Regulære uttrykk

Regulære uttrykk er kraftige verktøy for mønstergjenkjenning og manipulering i strenger. De er godt egnet for oppgaver som:

• Validering av inputformater (f.eks. e-postadresser, telefonnumre).
• Uthenting av spesifikk informasjon fra strenger (f.eks. finne alle URL-er i et dokument).
• Erstatning av mønstre i strenger (f.eks. fjerne alle HTML-tags).

Fordeler:

• Svært effektive for kompleks mønstergjenkjenning.
• Bredt støttet og godt forstått.

Ulemper:

• Kan være vanskelige å lese og vedlikeholde, spesielt for komplekse mønstre.
• Kan være mindre fleksible enn taggede maler for visse oppgaver.

            
const tekst = 'Dette er en streng med noen URL-er: https://www.example.com og http://another.example.org.';
const urler = tekst.match(/(https?://[^\s]+)/g);
console.log(urler); // Utskrift: [ 'https://www.example.com', 'http://another.example.org' ]

            

              
                Copy
              
            
          

Strengmetoder (substring, slice, replace, etc.)

JavaScript sine innebygde strengmetoder gir et grunnleggende sett med verktøy for å manipulere strenger. De egner seg for enkle oppgaver som:

• Uthenting av delstrenger.
• Erstatning av tegn eller delstrenger.
• Konvertering av strenger til store eller små bokstaver.

Fordeler:

• Enkle og lette å bruke for grunnleggende strengoperasjoner.
• Generelt effektive for enkle oppgaver.

Ulemper:

• Kan bli tungvint for mer kompleks strengmanipulering.
• Mindre fleksible enn regulære uttrykk eller taggede maler.

            
const str = 'Hei, verden!';
const delstreng = str.substring(0, 3); // Hent ut de første 3 tegnene
console.log(delstreng); // Utskrift: Hei

            

              
                Copy
              
            
          

Når man bør bruke taggede maler, regulære uttrykk eller strengmetoder

Valget av teknikk avhenger av de spesifikke kravene til oppgaven.

• Taggede maler: Brukes for komplekse strengbehandlingsoppgaver som krever tilpasset logikk, som HTML-escaping, lokalisering, styling og inputvalidering. De er også nyttige for å lage domenespesifikke språk (DSL-er).
• Regulære uttrykk: Brukes for mønstergjenkjenning, uthenting og erstatningsoppgaver. De er spesielt godt egnet for å validere inputformater og hente ut data fra strenger.
• Strengmetoder: Brukes for enkle strengmanipuleringsoppgaver, som å hente ut delstrenger, erstatte tegn og konvertere bokstavstørrelse.

I noen tilfeller kan det være nødvendig å kombinere forskjellige teknikker for å oppnå ønsket resultat. For eksempel kan du bruke en tagget mal for å escape HTML-entiteter og deretter bruke regulære uttrykk for å hente ut spesifikk informasjon fra den escapede strengen.

Beste praksis og hensyn

• Hold tag-funksjonene dine små og fokuserte. En tag-funksjon bør ideelt sett utføre én enkelt, veldefinert oppgave.
• Bruk beskrivende navn på tag-funksjonene dine. Dette vil gjøre koden din enklere å lese og forstå.
• Håndter feil på en elegant måte. Hvis tag-funksjonen din støter på en feil, bør den returnere en meningsfull feilmelding eller kaste et unntak.
• Vær oppmerksom på ytelse. Tag-funksjoner kan potensielt påvirke ytelsen, spesielt hvis de brukes ofte eller utfører komplekse operasjoner.
• Vurder å bruke et bibliotek for vanlige tag-oppgaver. Det finnes flere biblioteker som tilbyr ferdiglagde tag-funksjoner for oppgaver som HTML-escaping, lokalisering og styling.
• Saniter alltid brukerinput for å forhindre sikkerhetssårbarheter. Dette er spesielt viktig når du bruker taggede maler for å behandle brukerleverte verdier.

Konklusjon

JavaScript-malliteraler, spesielt med tillegget av taggede maler, gir en kraftig og fleksibel måte å manipulere strenger på. Ved å forstå fordelene og begrensningene ved taggede maler og sammenligne dem med andre strengbehandlingsteknikker, kan du skrive mer effektiv, lesbar og sikker kode. Enten du bygger webapplikasjoner, kommandolinjeverktøy eller server-side applikasjoner, vil mestring av malliteraler og taggede maler forbedre JavaScript-ferdighetene dine betydelig.